<template>
	<view class="user-box cmmon-page-bg">
		<view class="userinfo">
			<view class="avatar">
				<image src="../../static/logo.png" mode="aspectFill"></image>
			</view>
			<view class="ip">
				192.168.222.111
			</view>
			<view class="address">
				来自于: 中国
			</view>
		</view>
		<view class="slection operation">
			<view class="list">
				<!-- 也可将navigator换成view添加@click事件也一样，如下 -->
				<view class="row" v-for="item in userOperationList" :key="item.id" @click="clickOperationSkip(item.skipUrl)">
					<view class="left">
						<uni-icons :type="item.icon" size="20" class="icon"></uni-icons>
						<view class="text">
							{{item.title}}
						</view>
					</view>
					<view class="right">
						<view v-if="item.data" class="text">
							{{item.data}}
						</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>
				<!-- 条件编译，不同平台显示不同按钮 MP:小程序  ifndef MP：除小程序以外-->
				<!-- #ifdef MP -->
				<button class="btn" @click="onContactCustomerService">联系客服</button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<button class="btn" @click="clickCallPhone">拨打电话</button>
				<!-- #endif -->
			</view>
		</view>
		
		<view class="slection about">
			<view class="list">
				<view class="row" v-for="item in aboutOperationList" :key="item.id" @click="clickAboutSkip(item.skipUrl)">
					<view class="left">
						<uni-icons :type="item.icon" size="20"></uni-icons>
						<view class="text">
							{{item.title}}
						</view>
					</view>
					<view class="right">
						<view v-if="item.data" class="text">
							{{item.data}}
						</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userOperationList: [],
			aboutOperationList: []
		}
	},
	mounted() {
		this.userOperationList = [
			{"id": 1, "title": "我的下载", "icon": "download-filled","skipUrl": "/pages/book-classify/common-class-list", "data": 33},
			{"id": 2, "title": "我的消息", "icon": "chatbubble-filled", "skipUrl": "", "data": 10},
			{"id": 3, "title": "联系客服", "icon": "chatboxes-filled", "data": null}
		]
		
		this.aboutOperationList = [
			{"id": 1, "title": "订阅更新", "icon": "notification-filled", "skipUrl": "/pages/book-classify/common-class-list", "data": null},
			{"id": 2, "title": "常见问题", "icon": "flag-filled", "data": null}
		]
	},
	methods: {
		onContactCustomerService(){
			uni.showToast({
				title: "联系客服中~~~"
			})
		},
		clickCallPhone(){
			alert('拨打电话')
		},
		clickOperationSkip(url){
			if(url){
				uni.navigateTo({
					url: url
				})
			}
		},
		clickAboutSkip(url){
			if(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.user-box{
	.userinfo{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 50rpx 0;
		.avatar{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.ip{
			padding: 30rpx 0 10rpx;
			font-size: 44rpx;
			color: #333;
		}
		.address{
			font-size: 28rpx;
			color: #aaa;
		}
	}
	.slection{
		width: 690rpx; //750-30-30
		margin: 50rpx auto;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
		.list{
			.row{
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				border-bottom: 1rpx solid #eee;
				background-color: #fff;
				&:last-child{
					border-bottom: 0;
				}
				.left, .right{
					display: flex;
					align-items: center;
				}
				.left{
					// 方式一
					// .icon{
					// 	color: $common-icon-theme-color !important;
					// }
					// 方式二 (推荐)，方式一在小程序中不生效
					::v-deep.uni-icons{
						color: $common-icon-theme-color !important;
					}
					// 以下这种写法小程序报错
					// :deep(){
					// 	.uni-icons{
					// 		color: $common-icon-theme-color !important;
					// 	}
					// }
					.text{
						padding-left: 18rpx;
						color: #666;
					}
				}
				.right{
					.text{
						font-size: 28rpx;
						color: #aaa;
					}
				}
				
			}
			position: relative;
			.btn{
				opacity: 0;
				height: 100rpx;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}
}

</style>
